<template>
  <div class="container">
    <nav-bar title="搜索" />
    <div class="mod-tit">商家退货地址</div>
    <div class="shop-address">
      <div class="region">{{returnAddress.Region}}</div>
      <div class="address">{{returnAddress.Address}}</div>
      <div class="contact">{{returnAddress.ShipperName}} {{returnAddress.Phone}}</div>
    </div>
    <div class="mod-tit tit2">
      订单退货
      <div class="tips">如果只退款，则退货数量填写0</div>
    </div>
    <div class="form">
      <div class="item">
        <div class="label">退货数量:</div>
        <div class="ipt"><input type="number" v-model="ReturnQuantity"></div>
      </div>
      <div class="item item-area">
        <div class="label">退货说明:</div>
        <div class="ipt"><textarea v-model="dataForm.ReasonDetail"></textarea></div>
      </div>
      <div class="item">
        <div class="label">联系人员:</div>
        <div class="ipt"><input type="text" v-model="dataForm.ContactPerson"></div>
      </div>
      <div class="item">
        <div class="label">联系电话:</div>
        <div class="ipt"><input type="number" v-model="dataForm.ContactCellPhone"></div>
      </div>
      <div class="item">
        <div class="label">退款金额:</div>
        <div class="ipt"><input type="number" v-model="Amount"></div>
      </div>
      <div class="item-tips">
        最多可退{{orderItem.EnabledRefundAmount}}元
      </div>
      <div class="confirm">
        <div class="sure-btn" @click="returnMoney">申请退货</div>
      </div>
    </div>
    
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { refundOrder } from '../../network/order'
import { getUserOrder } from '../../network/user'
import { getShopGetAddress } from '../../network/shop'
import { Toast } from 'vant'
import { phoneReg } from '../../utils'


export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      canApply: false,
      order: {
        OrderPayAmount: 0,
      },
      orderItemId: this.$route.query.productId,
      orderItem: {
        EnabledRefundAmount: 0
      },
      Amount: 0,
      dataForm: {
        orderId: this.$route.query.orderId,
        ReasonDetail: '',
        ContactPerson: localStorage.getItem('userNick'),
        ContactCellPhone: localStorage.getItem('CellPhone'),
      },
      ReturnQuantity: 0, // 退货数量
      returnAddress: '',
    }
  },
  mounted() {
    this.getUserOrder()
    this.getRetrunAddress()
  },
  methods: {
    getRetrunAddress(){
      getShopGetAddress(res => {
        this.returnAddress = res
      })
    },
    getUserOrder(){
      let requestData = {
        userkey: this.userKey,
        id: this.dataForm.orderId
      }
      getUserOrder(requestData, order => {
        this.canApply = true
        this.order = order.Order
        this.orderItems = order.OrderItem

        order.OrderItem.map(item => {
          if(item.ItemId == this.orderItemId){
            this.orderItem = item
          }
        })
        console.log(this.orderItem.Count)
        this.ReturnQuantity = this.orderItem.Count
        this.Amount = this.orderItem.EnabledRefundAmount
      })
    },
    returnMoney(){
      // 获取到订单数据回调后，才可发起申请
      if(!this.canApply){
        return false
      }
      // 校验购买数量
      if(this.ReturnQuantity === ''){
        Toast('请输入购买数量')
        return false
      }
      if(this.ReturnQuantity > this.orderItem.Count){
        Toast('退货数量超出购买数量')
        return false
      }
      // 校验退货说明
      if(this.dataForm.ReasonDetail === ''){
        Toast('请输入退货说明')
        return false
      }
      // 校验联系人
      if(this.dataForm.ContactPerson === ''){
        Toast('请输入联系人员')
        return false
      }
      // 校验手机号
      if(this.dataForm.ContactCellPhone === ''){
        Toast('请输入联系电话')
        return false
      }
      if(!phoneReg(this.dataForm.ContactCellPhone)){
        Toast('联系手机号输入错误')
        return false
      }
      if(this.Amount > this.orderItem.EnabledRefundAmount){
        Toast('退款金额超出可退金额')
        return false
      }
      let requestData = {
        userkey: this.userKey,
        OrderItemId: this.orderItemId, // 售后产品
        ApplyDate: this.order.OrderDate.split(' ')[0],
        RefundAccount: '', 
        RefundPayType: 'BackOut', // 退款方式 退到预存款
        ReturnQuantity: this.ReturnQuantity.toString(), // 退货数量
        RefundType: 2, // 售后类型 1-退款 2-退货
        CertPic1: '',
        CertPic2: '',
        CertPic3: '',
        VerificationCodeIds: '',
        Amount: this.Amount, // 退款金额
        Reason: '不想买了', // 售后理由 '不想买了', '其他', '质量有问题'
        ...this.dataForm
        // ReasonDetail: '',
        // OrderId: this.orderId,
        // ContactPerson: '',
        // ContactCellPhone: '',
      }

      // 只退款
      if(this.ReturnQuantity.toString() === '0'){
        requestData.ReturnQuantity = ''
        requestData.RefundType = 1
      }
      refundOrder(requestData, res => {
        Toast('退货申请已提交，请等待工作人员审核')
        setTimeout(() => {
          this.$router.push('orders')
        }, 2000);
      })
    }
  },
}
</script>

<style scoped>
.mod-tit{
  line-height: 20px;
  font-weight: bold;
  padding-left: 22px;
  padding-top: 30px;
}
.form{
  padding: 0 0 20px 0;
}
.form .label{
  font-size: 14px;
  padding-right: 10px;
}
.form .item{
  display: flex;
  align-items: center;
  padding: 5px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fff;
  margin: 15px 20px 0 20px;
}
.form .item-area{
  align-items: flex-start;
  padding-top: 15px;
}
.form .item .ipt{
  flex-grow: 1;
}
.form .item textarea{
  width: 100%;
  height: 100px;
}
.form .item input{
  height: 40px;
  width: 100%;
  text-align: right;
  background: none;
}
.confirm{
  padding: 20px;
}
.confirm .sure-btn{
  width: 100%;
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #d50721;
}
.item-tips{
  color: #999;
  font-size: 12px;
  padding-right: 40px;
  padding-top: 5px;
  text-align: right;
}
.shop-address{
  margin: 10px 20px 0 20px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  padding: 10px 20px;
  line-height: 1.5;
  background-color: #fff;
}
.tit2{
  display: flex;
  justify-content: space-between;
  align-items: flex-endaaa;
}
.tips{
  padding-right: 20px;
  font-weight: normal;
  font-size: 12px;
  color: #999;
}
</style>